<template>
  <div class="examPrepareBody">
    <div class="box" v-loading="loading">
      <div class="title">
        <el-page-header :content="examInfo.title" @back="goBack" />
      </div>
      <div class="timeBox">
        <div
          class="timeSon"
          v-if="!(endTimeDifference > 0 && beginTimeDifference > 0)"
        >
          <p>开放时间</p>
          <p class="time">
            {{
              examInfo.begintime
                ? examInfo.begintime.substr(0, 16) +
                  "至" +
                  examInfo.endtime.substr(0, 16)
                : "不限"
            }}
          </p>
        </div>
      </div>
      <div class="fractionBox">
        <div class="fraction">
          <span class="titleNum">题目数量</span>
          <span class="num">{{ examInfo.questions.length }}题</span>
        </div>
        <div class="solid"></div>
        <div class="fraction">
          <span class="titleNum">考试时长</span>
          <span class="num">
            {{
              examInfo.limittime <= 0 ? "不限" : examInfo.limittime + "min"
            }}</span
          >
        </div>
        <div class="solid"></div>
        <div class="fraction">
          <span class="titleNum">考试总分</span>
          <span class="num">{{ examInfo.scores }}分</span>
        </div>
        <div class="solid"></div>
        <div class="fraction">
          <span class="titleNum">通过分数</span>
          <span class="num">{{ examInfo.pastscores }}分</span>
        </div>
      </div>
      <div class="buttonBox">
        <el-button
          type="primary"
          @click="startExam"
          class="but"
          :disabled="
            examInfo.begintime
              ? !(endTimeDifference >= 0 && beginTimeDifference >= 0)
                ? true
                : false
              : false
          "
          >{{
            examInfo.begintime
              ? !(endTimeDifference >= 0 && beginTimeDifference >= 0)
                ? beginTimeDifference * -1 <= 5 && beginTimeDifference * -1 >= 0
                  ? endTime + " 后开始考试"
                  : "不在开放时间内"
                : "开始考试"
              : "开始考试"
          }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onUnmounted, reactive, toRefs, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
// import { getForResult } from "../../apis/stutest/stutest";
import { getTest } from "../../apis/test/test";
import { calculateDiffTime } from "../../utils/processingTime";
import { ElTable, ElMessage } from "element-plus";
// 引入moent
import moment from "moment";
const router = useRouter();
const route = useRoute();
const data: any = reactive({
  loading: false,
  testid: 0,
  examInfo: {
    title: "",
    begintime: "",
    endtime: "",
    currenttime: "",
    questions: [],
  },
  // 当前到考试结束时间差
  endTimeDifference: 0,
  // 开始考试到当前时间差
  beginTimeDifference: 0,
  // dateTime:new Date()
  endTime: "00:00",
});
const { endTime, examInfo, endTimeDifference, beginTimeDifference, loading } =
  toRefs(data);
data.testid = Number(route.query.id);

// 点击返回
const goBack = () => {
  router.push("stutest");
};
// 请求考试信息
const forResult = async () => {
  data.loading = true;
  const res: any = await getTest(data.testid);
  if (res.errCode === 10000) {
    data.examInfo = res.data;
    data.loading = false;
  } else {
    ElMessage.error(res.errMsg);
    data.loading = false;
  }
};
forResult();
// 点击开始考试
const startExam = () => {
  router.push({ name: "stuexam", query: { testid: data.testid } });
};
// 处理时间封装
const calculatingTime = () => {
  // 计算当前到考试结束时间差
  let date = moment(new Date()).format("YYYY-MM-DD HH:mm");
  if (data.examInfo.endtime) {
    const endtime = calculateDiffTime(
      Number(new Date(date)),
      Number(new Date(data.examInfo.endtime.substr(0, 16)))
    );
    data.endTimeDifference =
      endtime.day * 24 * 60 + endtime.hour * 60 + endtime.minute;
    // 计算开始考试到当前时间差
    const time = calculateDiffTime(
      Number(new Date(data.examInfo.begintime.substr(0, 16))),
      Number(new Date(date))
    );
    data.beginTimeDifference =
      (time.day + 1) * 24 * 60 + (time.hour + 1) * 60 + time.minute;
    if (data.beginTimeDifference <= 5) {
      //获取当前时间
      var dates = new Date();
      var now = Number(dates);
      //设置截止时间
      var end = Number(new Date(data.examInfo.begintime.substr(0, 16)));
      //获取截止时间和当前时间的时间差
      var leftTime = end - now;
      //定义变量 d,h,m,s分别保存天数，小时，分钟，秒
      var d: any, h, m, s;
      //判断剩余天数，时，分，秒
      if (leftTime > 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        m = Math.floor((leftTime / 1000 / 60) % 60);
        s = Math.floor((leftTime / 1000) % 60);
        if (String(h).length === 1) {
          h = "0" + h;
        }
        if (String(m).length === 1) {
          m = "0" + m;
        }
        if (String(s).length === 1) {
          s = "0" + s;
        }
        data.endTime = m + ":" + s;
      } else {
        data.endTime = "00:00";
        clearInterval(timer);
      }
    }
  }
};
calculatingTime();
// 定时器调用时间封装
var timer = setInterval(() => {
  calculatingTime();
}, 1);
// 销毁定时器
onUnmounted(()=>{
  clearInterval(timer);
})
</script>

<style lang="less" scoped>
@import url("../../static/css/stutest/examPrepare.css");
</style>
